<template>
	<view class="music-swiper">
		<!-- <box-title title="新歌速递" buttonName="播放全部" iconName="kaishi2" @handlePlay="handlePlay('newSongList')"></box-title> -->
		<scroll-view class="zy-list" style="margin-top: 5px;">
			<swiper style="margin-top:8px;height:190px" next-margin="30px">
				<swiper-item class="music-swiper-item" v-for="group in groups">
					<view class="zy-song-item flex align-center" v-for="(item, index) in songList"
						v-if="(index>=group*3)&&(index<(group*3+3))">
						<image :src="item.picUrl" mode="scaleToFill" class="music-song-item-image"></image>
						<view class="music-text">
							<text style="{ color: '#000' }">{{ item.name }}</text>
							<text style="{ color: '#666';font-size:12px; }">-{{item.song.artists[0].name}}</text>
						</view>
						<text class="startIcon icon-kaishi3"></text>
					</view>
				</swiper-item>
			</swiper>
		</scroll-view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				songList: [],
				groups: [0, 1, 2]
			};
		},
		onLoad() {
			uni.request({
				url: 'https://autumnfish.cn/personalized/newsong',
				success: (res) => {
					this.songList = res.data.result;
					console.log(this.songList)
					console.log(this.songList[0].song.artists[0].name)
				}
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.music-swiper {
		margin: 20px 0;

		&:last-of-type {
			margin-bottom: 0;
		}
		
		.music-swiper-item {
			padding-left: 6px;
			box-sizing: border-box;
		}
		
		.zy-song-item {
			width: 100%;
		
			.music-song-item-image {
				width: 53px;
				height: 53px;
				border-radius: 7px;
				margin: 7px 10px 0 0;
			}
		
			.music-text {
				width: calc(100% - 120px);
				display: inline-block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		
			.startIcon {
				margin-left: 15px;
				font-size: 40rpx;
				color: #ff9700;
			}
		}
	}

	
</style>
